<ul class="cm-tab-list" *ngIf="listData">
  <ng-content></ng-content>
  <li class="tab-list-item" *ngFor="let tab of listData; trackBy: trackByText" [ngClass]="{'menu-left': menuLeft}">
    <ng-container *ngIf="tab.innerHTML === undefined">
      <a class="tab-list-link" *ngIf="isNavTab" (click)="onClick(tab)" [routerLink]="baseUrl + tab.url" routerLinkActive="active"
        [routerLinkActiveOptions]="activeOptions">{{tab.text}}</a>
      <a class="tab-list-link" href="javascript:;" *ngIf="!isNavTab && !tab.children" (click)="onClick(tab)" [ngClass]="{'active': currentTab == tab || (currentTab && currentTab.key && currentTab.key === tab.key) }">{{tab.text}}</a>
      <a class="tab-list-link tab-list-sub-toggle" href="javascript:;" *ngIf="tab.children" (click)="handleSubToggle(tab)" [ngClass]="{'active': getSubToggleClass(tab)}">{{getSubToggleLable(tab)}}</a>
      <ul class="tab-list-sub-list" *ngIf="tab.children">
        <li class="tab-list-item tab-list-sub-list-item" *ngFor="let sub of tab.children">
          <a class="tab-list-link" href="javascript:;" *ngIf="!isNavTab" (click)="onClick(sub)" [ngClass]="{'active': currentTab == tab || (currentTab && currentTab.key && currentTab.key === tab.key)}">{{sub.text}}</a>
        </li>
      </ul>
    </ng-container>
    <ng-container *ngIf="tab.innerHTML !== undefined">
      <a href="javascript:;" class="tab-list-link" (click)="onClick(tab)" [ngClass]="{'active': currentTab == tab || (currentTab && currentTab.key && currentTab.key === tab.key)}" [innerHTML]="getHtml(tab.innerHTML)"></a>
    </ng-container>
  </li>
</ul>